<template>
	<view class="container">
		<view class="" style="height: 10rpx;background-color: #FAFAFA;">

		</view>
		<view class="content">
			<view class="list">
				<uni-collapse  class="item" v-for="(item, index) in list" :key="item.ID">
					<uni-collapse-item titleBorder="none">
						<template v-slot:title>
							<view class="top"  @click="groupChange(item)">
								<view class="info">
									{{item.name + ' ' +item.mobile}}
									<!-- <uni-tag size="mini" v-if="item.is_default" text="默认" custom-style="background-color: #0bc4e3; border-color: #0bc4e3; color: #fff; margin-right:20upx;" type="primary" />
									 -->
									<view class="tag-box" v-if="item.is_default">
										默认地址
									</view>
								</view>
								<view class="address">
									{{item.province+ ' ' + item.city + ' '+item.area+ ' '+item.street+ ' ' + item.detailed}}
								</view>
							</view>
						</template>
						<view class="content">
							<view class="bottom">
								<!-- <view class="left"  @click="setDefault(item)">
									<switch name="switch" color="#0bc4e3" :checked="item.is_default" style="transform:scale(0.7)"/>
									默认地址
								</view> -->
								<view class="right">
									<view class="items" @click="setItem(item,1)">
										编辑
										<uni-icons class="itemsicons" type="compose" size="20"></uni-icons>
									</view>
									<view class="items" @click="setItem(item,2)">
										删除
										<uni-icons class="itemsicons" type="trash-filled" color="red" size="20"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>

				<view class="blank-box" v-if="list.length==0">
					<image src="https://pili-vod.guanxikeji.com/fubao/img/1755592252418.png" mode="widthFix"></image>
					<view class="blank-top">
						您暂时还没有保存的地址
					</view>
					<view class="blank-text">
						添加地址信息，让您的结算过程更快捷
					</view>

					<view class="blank-but" @click="$goURl('/pages/personal/address/add')">
						添加收货人地址
					</view>
				</view>

			</view>
		<!-- 	<view class="bottomButtons"></view>
			<view class="bottomButton" @click="$goURl('/pages/personal/address/add')">
				<view class="btn">添加地址</view>
			</view> -->

			<view class="is-but" @click="$goURl('/pages/personal/address/add')">
				添加地址
			</view>
		</view>
	</view>
</template>
<script setup>
		import {ref,getCurrentInstance} from "vue";
		import {onLoad,onShow} from "@dcloudio/uni-app";
		const {proxy} = getCurrentInstance();
		let list =ref([])
		let state =ref(false)
		let typeStr =ref('')
		let takeout =ref(0)
		onLoad((option)=>{
			console.log('页面onLoad')
			try{
				state.value=option.order?true:false
				typeStr.value=option.typeStr
				takeout.value=option.takeout
			}catch(e){
				//TODO handle the exception
			}
		})
		onShow(()=>{
			console.log('页面onShow')
			init()
		})
		function init(){
			list.value=[]
			proxy.$request({
				url: `api/address/?page=1&size=20&takeout=${takeout.value}`,
				method: 'get',
				success: (res) => {
					console.log(res,"res")
					res.data.data.forEach(item=>{
						item.is_default=(item.is_default?true:false)
						list.value.push(item)
					})
				}
			})
		}
		function setDefault(data){
			data.is_default=data.is_default?0:1
			proxy.$request({
				url: `api/address/`,
				method: 'PUT',
				data:data,
				success: (res) => {
					if(state.value){
						uni.navigateBack()
					}else{
						init()
					}
				}
			})
		}
		function setItem(data,state){
			if(state==1){
				proxy.$goURl('/pages/personal/address/add?data='+JSON.stringify(data))
			}else{
				uni.showModal({
					title:'提示',
					content:'确定删除改地址嘛',
					success:(res)=>{
						if(res.confirm){
							proxy.$request({
								url: `api/address/`,
								method: 'DELETE',
								data:{id:data.ID},
								success: (res) => {
									uni.showToast({
										icon:'none',
										title:res.errmsg
									})
									init()
								}
							})
						}
					}
				})
			}
		}
		function groupChange(item){
			console.log(item)
			if(typeStr.value==1){
				let data = {
					name:item.name,
					mobile:item.mobile,
					province:item.province,
					city:item.city,
					area:item.area,
					detailed:item.detailed,
					id:item.ID,
					is_default:item.is_default,
					longitude:item.longitude,
					latitude:item.latitude
				}
				uni.$emit('selectAddress', data),
				uni.navigateBack({
					delta: 1
				})
			}
		}
</script>


<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.container{
		.content{
			.list{
				padding: 30upx;
				.item{
					// padding: 30upx;
					margin-bottom: 30upx;
					background-color: #fff;
					padding-bottom: 38rpx;
					border-bottom: 1rpx solid #DDDDDD;
					.top{

						.info{
							margin-bottom: 20upx;
							display: flex;
							align-items: center;

						}
						.address{

						}
					}
					.bottom{
						padding: 30upx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.left{
							display: flex;
							align-items: center;
						}
						.right{
							display: flex;
							.items{
								display: flex;
								margin-right: 30upx;
								align-items: center;
								.itemsicons{
									margin-left: 15upx;
								}
							}
						}

					}
				}
			}
		}
	}
	.blank-box{
		margin-top: 350rpx;
		text-align: center;
		image{
			width: 50rpx;
			margin-bottom: 50rpx;
		}
		.blank-top{
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
		}
		.blank-text{
			font-weight: 400;
			font-size: 24rpx;
			color: #8F8F8F;
			margin-top: 24rpx;
			margin-bottom: 84rpx;
		}
		.blank-but{
			font-weight: 400;
			font-size: 28rpx;
			color: #2D2D2D;
			width: 440rpx;
			height: 80rpx;
			border-radius: 12rpx;
			border: 1rpx solid #000000;
			text-align: center;
			line-height: 80rpx;
			margin: auto;
		}
	}
	.tag-box{
		width: 98rpx;
		height: 32rpx;
		background: #C59E77;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 32rpx;
		margin-left: 10rpx;
	}
	.is-but{
		height: 96rpx;
		background: #F63B29;
		border-radius: 16rpx;
		text-align: center;
		line-height: 96rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
		right: 30rpx;
	}
</style>
